<template lang="html">
  <div id="app" >
    <transition-group name="fade" tag="ul">
      <div  v-if="!hidden" v-bind:key="hidden">
        <!--<router-view></router-view>-->
        <index></index>
        <!--真二维码-->
        <img class="erweima-y" src="../../assets/erweima.png" style="">
        <jrFooter></jrFooter>
      </div>
    </transition-group>
    <div class="q" style="display: none" id="quchu">
      <img class="num num1" src="../../assets/0.png" alt="" >
      <img class="num num2" src="../../assets/1.png" alt="">
      <img class="num num3" src="../../assets/2.png" alt="">
      <img class="num num4" src="../../assets/3.png" alt="">
      <img class="num num1" src="../../assets/4.png" alt="">
      <img class="num num2" src="../../assets/5.png" alt="">
      <img class="num num3" src="../../assets/6.png" alt="">
      <img class="num num3" src="../../assets/7.png" alt="">
      <img class="num num4" src="../../assets/8.png" alt="">
      <img class="num num4" src="../../assets/9.png" alt="">
    </div>
    <loader
    :loading="loading" :color="color" :size="size"
    v-if="hidden" :class="classObject" ></loader>
  </div>
</template>

<script>
  // vue相对路径不能省略，必须是以./ ../开头 ，绝对路径以/开头
  import Vue from 'vue'
  import RingLoader from 'vue-spinner/src/RingLoader.vue'
  import index from '../../components/Index.vue'
  import jrFooter from '../../components/JrFooter.vue'
  import JrUtils from '../../common/js/JrUtils'
  import wx from 'weixin-js-sdk'
  // 引入详情页
  export default {
    name: 'laohuji',
    data () {
      return {
        number : 10,
        hidden: true,
        topshow: false,
        hidden: true,
        color: '#000',
        size: '5rem',
        loading: true,
        loadTop: 500,
        download: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.jinr.core',
        url1: 'http://wthrcdn.etouch.cn/weather_mini?citykey=101010100',
        urlEntrance: 'http://hbjr.jinrgame.com/HunanLaohuji/index',
        isOneScreen: true,
        countImg: 0
      }
    },
    computed: {
      classObject: function () {
        return {
          active: this.isActive && !this.error,
          'oneScreen': this.isOneScreen,
        }
      }
    },
    watch: {
      countImg (val,oldval) {
        if(val == 8){
            this.hidden = false
            console.log("加载完毕")
            //然后可以对后台发送一些ajax操作
        }
      }
    },
    created () {
      /** 屏蔽分享 */
      function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');  //隐藏右上角菜单接口
      }

      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      } else {
        onBridgeReady();
      }
    },
    mounted () {
//      document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
//        // 通过下面这个API隐藏右上角按钮
//        wx.call('hideOptionMenu');
//      });

//      document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
//        // 通过下面这个API显示右上角按钮
//        WeixinJSBridge.call('showOptionMenu');
//      });

      function onBridgeReady(){
        WeixinJSBridge.call('hideOptionMenu');
      }

      if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        }else if (document.attachEvent){
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      }else{
        onBridgeReady();
      }

      setTimeout(() => {
        this.hidden = false
      }, 2000)

    },
    methods:{
      // 初始化请求数据
      initHttp:  function(url, params){
        this.$http.post(url, params).then((response) => {  // Lambda写法
          response = response.data;
          $('#show').html(response)
          console.log(response)
        });
      }
  },
    // 注册组件
    components: {
      'loader': RingLoader,
      index,
      jrFooter
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../common/style/base.styl'

#app
  position relative
  width 10rem
  margin  0 auto
  padding-top rem(42)
  background-color #64acff
  padding-bottom rem(160)


  .erweima-y
    position absolute;
    left 0
    bottom 0rem
    z-index 88
    width rem(430)
    border 2px red solid
    padding 3rem 0 3rem 3rem
    margin -3rem 0 3rem -3rem
    -webkit-user-select: none
    opacity 0



  .loadText
    font-size .3rem
    text-align center
    margin-top 2%
    color #03a9f4

  /* 过渡样式 fade为组件name值*/
  /**
  Enter: v-enter --> v-enter-active
  Leave: v-leave --> v-leave-active
   */

  .fade-enter-active,
  .fade-leave-active
    transition: opacity .4s , transform 0.3s linear,
    -webkit-transition opacity 1s, -webkit-transition 0.3s linear
  .fade-enter,
  .fade-leave-active
    opacity 0.2
    transform translate3d(0, rem(5), 0)
    -webkit-transform translate3d(0, rem(5), 0)

  .oneScreen
    position relative
    top rem(-300)
    left 50%
    margin-top 100%
    -webkit-transform translate3d(-50%,0%,0)
    transform translate3d(-50%,0%,0)

  .v-spinner
    .v-ring1
      margin  0 auto
</style>
